@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-gradient-to-br from-blue-50 to-slate-100 min-h-screen text-gray-800;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold;
  }

  /* 滚动条样式 */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium transition-colors duration-200;
  }

  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }

  .btn-outline {
    @apply border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }

  .card {
    @apply bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all duration-300;
  }

  .input {
    @apply px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none;
  }
  
  .tag {
    @apply px-2.5 py-1 text-xs font-medium rounded-full;
  }

  .tag-primary {
    @apply bg-blue-100 text-blue-800;
  }

  .tag-secondary {
    @apply bg-gray-100 text-gray-600;
  }

  .tag-success {
    @apply bg-green-100 text-green-800;
  }

  .page-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6;
  }

  .section {
    @apply mb-8;
  }

  .server-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }

  .server-card {
    @apply card cursor-pointer transform hover:-translate-y-1;
  }

  .server-card-content {
    @apply p-6;
  }

  .server-header {
    @apply flex items-center justify-between mb-4;
  }

  .server-title {
    @apply text-xl font-semibold text-gray-900;
  }

  .server-description {
    @apply text-gray-600 mb-4 line-clamp-2;
  }

  .server-tags {
    @apply flex flex-wrap gap-2 mb-4;
  }

  .server-footer {
    @apply mt-2 flex justify-end;
  }

  .server-link {
    @apply text-blue-500 hover:text-blue-700 text-sm font-medium;
  }

  /* 搜索和筛选区域 */
  .filter-card {
    @apply bg-white p-6 rounded-xl shadow-md mb-8 backdrop-blur-sm bg-opacity-90;
  }

  .search-container {
    @apply relative flex-1;
  }

  .search-icon {
    @apply absolute left-3 top-3.5 text-gray-400;
  }

  .search-input {
    @apply w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  }

  .filter-tags {
    @apply flex flex-wrap gap-2;
  }

  .filter-tag {
    @apply px-3 py-1.5 rounded-full text-sm font-medium transition-colors duration-200 cursor-pointer;
  }

  .filter-tag-active {
    @apply bg-blue-500 text-white shadow-sm;
  }

  .filter-tag-inactive {
    @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
  }

  /* 分页控件 */
  .pagination {
    @apply flex justify-center mt-8;
  }

  .pagination-button {
    @apply px-3 py-2 rounded-md text-sm font-medium transition-all duration-200;
  }

  .pagination-active {
    @apply bg-blue-500 text-white shadow-sm;
  }

  .pagination-inactive {
    @apply text-gray-700 hover:bg-gray-200;
  }

  .pagination-disabled {
    @apply text-gray-400 cursor-not-allowed;
  }

  /* 动画效果 */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  /* 加载动画 */
  .spinner {
    @apply animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500;
  }

  /* 卡片悬停效果 */
  .hover-card-effect {
    transition: all 0.3s ease;
  }

  .hover-card-effect:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  /* 导航栏阴影效果 */
  .nav-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  /* 光晕效果 */
  .glow-effect {
    box-shadow: 0 0 15px rgba(66, 153, 225, 0.5);
  }

  /* 玻璃态效果 */
  .glass-effect {
    @apply backdrop-blur-sm bg-white bg-opacity-80;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  }

  /* 图标悬停效果 */
  .icon-hover-effect {
    @apply transition-transform duration-200;
  }
  
  .icon-hover-effect:hover {
    @apply transform scale-110;
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
} 